<template>
	<view class="">
		<view class="seach">
			<!-- 搜索 -->
			<view class=" bg-white d-flex j-center a-center">
				<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
					<u-icon   name="search" color="#888888" size="33" class="mx-2"></u-icon>
					<input class="" type="text" placeholder="搜索卡号或卡密搜索" @click="sendSeach" focus disabled="true"  />
					
				</view>
			</view>
			<!-- 头部 -->
			<view class="bg-white bg-white" >
				<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="todatList" :current="current" @change="tabsChange" :is-scroll="false"
							swiperWidth="750"></u-tabs-swiper>
			</view>
		</view>
		
			<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
						<view class="mt-5" v-if="u_loadmore">
							<u-loadmore status="loading" icon-type="circle" />
						</view>
						<view v-else class="h_100">
							<!-- 在售 -->
							<view class="h_100">
								<view v-if="virtualCard.length<=0" class="d-flex flex-column w-100 h_100 a-center j-center">
									<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
									<view class="">暂无卡片</view>
								</view>
								<view class="" v-else>
									<view class="m-2 p-3 bg-white rounded-20" v-for="(item,index) in virtualCard" :key="index">
										<view class="">卡片序列：<text>{{item.card_sn}}</text></view>
										<view class="my-1">卡片密码：<text>{{item.card_password}}</text></view>
										<view class="">截止日期：<text>{{item.formatted_expire_date.substr(0,10)}}</text></view>
										<view class="mt-2 font d-flex j-end">
											<view class="goods_card_content_footer" v-for="(goodsItem,goodsIndex) in card_items" :key="goodsIndex" @click="cardOpen(goodsItem,item)">
												<view>{{goodsItem.card_title}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
						<!-- 已售 -->
						<view class="h_100">
							<view v-if="sold_Card.length<=0" class="d-flex flex-column w-100 h_100 a-center j-center">
								<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
								<view class="">暂无卡片</view>
							</view>
							<view class="" v-else>
								<view class="m-2 p-3 bg-white rounded-20" v-for="(item,index) in sold_Card" :key="index">
									<view class="mb-1">卡片序列：<text>{{item.card_sn}}</text></view>
									<view class="my-1">卡片密码：<text>{{item.card_password}}</text></view>
									<view class="">截止日期：<text>{{item.formatted_expire_date.substr(0,10)}}</text></view>
									<view class="my-1">订单编号：<text>{{item.order_sn}}</text></view>
									<view class="mt-2 font d-flex j-end">
										<view class="goods_card_content_foot" v-for="(goodsItem,goodsIndex) in sold_items" :key="goodsIndex" @click="soldOpen(goodsItem,item)">
											<view>{{goodsItem.card_title}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		<!-- 删除提示 -->
		<u-modal v-model="deleShow" title="删除提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="dele_confirm">
			<view class="py-3">
				<view class="text-center">您确定要删除该商品吗？</view>
			</view>
		</u-modal>
		
		<view class="footer">
		</view>
		<view class="bg-white release py-2 w-100 position-fixed bottom-0">
			<button type="warn" @click="next_sub">添加补卡</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				todatList:[
					{todat_id:1,name:"在售"},
					{todat_id:2,name:"已售"},
				],
				card_items:[
					{card_id:1,card_title:"复制卡号/卡密"},
					{card_id:2,card_title:"编辑"},
					{card_id:3,card_title:"删除"},
				],
				sold_items:[
					{card_id:1,card_title:"复制订单号"},
					{card_id:2,card_title:"复制卡号/卡密"},
					// {card_id:2,card_title:"编辑"},
					// {card_id:3,card_title:"删除"},
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:0, // 屏幕高度
				goods_id:"",
				virtualCard:"", // 掌柜虚拟商品虚拟卡列表
				scrollHeight:0, // 屏幕高度
				deleShow:false, // 删除
				dele_id:0, // ID
				sold_Card:"", // 已售列表
				u_loadmore:true, // 加载中
				
				timerss:null, // 倒计时
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight- res[0].top - res[1].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 在售
			cardOpen(goodsItem,item){
				if(goodsItem.card_title=='复制卡号/卡密'){
					uni.setClipboardData({
					    data: item.card_sn+'\n'+item.card_password,
					    success: function () {
					        console.log('success');
					    }
					});
				}else if(goodsItem.card_title=='编辑'){
					uni.navigateTo({
						url:`/pagesA/virtual/virtual-edit-card?edit=编辑&card_id=${item.card_id}`
					})
				}else if(goodsItem.card_title=='删除'){
					this.deleShow=true
					this.dele_id=item.card_id
				}
			},
			// 已售
			soldOpen(goodsItem,item){
				if(goodsItem.card_title=='复制订单号'){
					uni.setClipboardData({
					    data: item.order_sn,
					    success: function () {
					        console.log('success');
					    }
					});
				}else if(goodsItem.card_title=='复制卡号/卡密'){
					uni.setClipboardData({
					    data: item.card_sn+'\n'+item.card_password,
					    success: function () {
					        console.log('success');
					    }
					});
				}else if(goodsItem.card_title=='编辑'){
					uni.navigateTo({
						url:`/pagesA/virtual/virtual-add-card?edit=编辑&goods_id=${this.goods_id}`
					})
				}else if(goodsItem.card_title=='删除'){
					this.deleShow=true
					this.dele_id=item.card_id
				}
			},
			// 确认删除
			dele_confirm(){
				this.$H.post("v2/store/virtual/goods/virtualCard/delete",{
					card_id:this.dele_id
				}).then(res=>{
					this.$nextTick(function(){
						this.$H.post("v2/store/virtual/goods/virtualCard",{
							goods_id:this.goods_id
						}).then(ress=>{
							this.virtualCard=ress.data
						})
					})
				})
			},
			// 搜索页面
			sendSeach(){
				uni.navigateTo({
					url:`/pagesA/virtual/virtual-seach?card=卡片&goods_id=${this.goods_id}`
				})
			},
			// 添加
			next_sub(){
				uni.navigateTo({
					url:"/pagesA/virtual/virtual-add-card?goods_id="+this.goods_id
				})
			}
		},
		onShow() {
			this.timerss=setInterval(()=>{
				this.$H.post("v2/store/virtual/goods/virtualCard",{
					goods_id:this.goods_id,
					status:"onsale"
				}).then(res=>{
					this.virtualCard=res.data
				})
				this.$H.post("v2/store/virtual/goods/virtualCard",{
					goods_id:this.goods_id,
					status:"sold"
				}).then(res=>{
					this.sold_Card=res.data
				})
			},5000)	
		},
		onUnload() {
			clearTimeout(this.timerss);
			this.timerss = null;
		},
		onHide() {
			clearTimeout(this.timerss);
			this.timerss = null;
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("v2/store/virtual/goods/virtualCard",{
				goods_id:e.goods_id,
				status:"onsale"
			}).then(res=>{
				this.virtualCard=res.data
				this.u_loadmore=false 
			})
			this.$H.post("v2/store/virtual/goods/virtualCard",{
				goods_id:e.goods_id,
				status:"sold"
			}).then(res=>{
				this.sold_Card=res.data
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.goods_card_content_footer view{
		border: 1px solid #808080;
		padding: 8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.goods_card_content_foot view{
		border: 1px solid #808080;
		padding: 8upx 15upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
</style>
